<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素属性读取</title>
  </head>
  <body>
    <a href="http://tmooc.cn" id="a1" title="Tmooc">Go To Tmooc</a>

    <script>
      const a = document.querySelector('a')
      console.dir(a) // 到后台查看其中的各种属性

      // 属性的读取分两种方式:
      // 旧: 通过 getAttribute 方法读取
      console.log(a.getAttribute('id'))
      // 新: 直接通过属性名读取
      console.log(a.id)

      // 修改属性
      // 旧:
      a.setAttribute('title', '百度一下')
      // 新:
      a.title = '百度一下'

      // 判断是否存在某个属性:
      console.log(a.hasAttribute('target')) // false 代表没有

      // 新语法: 没有自定义过的属性, 其值默认是 空字符串
      console.log(a.target != '') //值不是空字符串, 就说明有
    </script>
  </body>
</html>
